<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通知详情页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../css/road.css" />
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../js/bootstrap.js"></script>
    <!-- <script src="../js/index.js?time=2017-06-07"></script> -->
    <style>
        .modal-backdrop.in {
            /*filter: alpha(opacity=50);*/
            opacity: 0;
        }

        .row {
            margin-left: 0px;
        }

        .contain {
            width: 100%;
            overflow-x: hidden;
        }

        .row_style {
            border-bottom: 20px solid #ddd;
        }

        .row_style i {
            font-size: 18px;
            color: #666;
            vertical-align: bottom
        }

        .row_style2 p,
        .row_style3 p {
            text-align: right;
        }

        .row_style2 .col-md-6 input,
        .row_style3 .col-md-6 input,
        .row_style2 .col-md-6 select,
        .row_style3 .col-md-6 select {
            width: 100%;
            height: 100%;
            box-shadow: none;
            padding: 2px;
            border: 1px solid #333;
        }

        .row_style2 .col-md-6 .form-control-feedback,
        .row_style3 .col-md-6 .form-control-feedback {
            right: 15px;
            top: 3px;
            line-height: 8px;
        }

        .table-container {
            width: 100%;
        }

        .tabstyle {
            padding: 0;
        }

        #tzTable tbody tr>td:last-child {
            cursor: pointer;
            padding: 0;
        }

        #tzTable tbody tr>td:last-child span {
            background: #30a801;
            color: white;
            padding: 2px 10px;
        }
    </style>
</head>

<body>
    <div class="contain">
        <div class="header row" style="text-align: center; background: #850b06; color: #fff;margin: 0;">
            <div class="col-sm-12">
                <h4 class="title">投资计划管理信息系统</h4>
                <div class="mianbaoxie">
                    <a href="../index.html">主页</a>>通知提醒</div>
            </div>
        </div>
        <div class="row" style="margin: 0;">
            <div class="aside col-sm-1">
                <!--<div class="panel-group" id="myid">-->
                <div class="panel">
                    <div class="panel-heading" style="border-bottom: 1px solid #616161;">
                        <h3 class="panel-title">
                            <a data-toggle="collapse">
                                <p>
                                    <image class="tzicon" src="../image/info.png"></image>通知提醒
                                </p>
                            </a>
                        </h3>
                    </div>
                    <div class="panel-collapse in">
                        <div class="panel-body">
                            <ul class="select">
                                <li class="active unread_btn" data-class='unread'>
                                    <p>
                                        <span class="yellow circle"></span>
                                        <span>未读通知
                                            <i class="notreaded">0</i>条</span>
                                    </p>
                                </li>
                                <li class="readed_btn" data-class='readed'>
                                    <p>
                                        <span class="green circle"></span>
                                        <span>已读通知
                                            <i class="readed">0</i>条</span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-10" style="padding:0">
                <div class="index_right" id="index_right_div" style=" width:100%;height:100%;">
                    <div class="row row_style">
                        <div class="col-md-12">
                            <div class="col-md-1">
                                <button class="normal tz_delete">
                                    <img src="../image/123_07.png" alt="" />删除</button>
                            </div>
                            <div class="col-md-1">
                                <button class="normal refresh">
                                    <i class="glyphicon glyphicon-repeat"></i>刷新</button>
                            </div>
                        </div>
                    </div>
                    <div class="row row_style3">
                        <div class="col-md-4">
                            <span class="glyphicon glyphicon-fast-backward pageStart"></span>
                            <span class="glyphicon glyphicon-step-backward pageUp"></span>&nbsp;第&nbsp;
                            <input class="inputsTyle" type="text" value="1" />&nbsp;页 &nbsp;/&nbsp;共&nbsp;
                            <input type="text" class="inputsTyle pageTotally" value="1" readonly="readonly" />&nbsp;页&nbsp;
                            <span class="glyphicon glyphicon-step-forward pageDown"></span>
                            <span class="glyphicon glyphicon-fast-forward pageEnd"></span>
                        </div>
                        <div class="col-md-4">
                            每页&nbsp;
                            <input class="inputsTyle" type="text" value="0" readonly="readonly" />&nbsp;条 &nbsp;第&nbsp;
                            <input type="text" class="inputsTyle" value="1" readonly="readonly" />条/共
                            <input type="text" class="inputsTyle" value="1" readonly="readonly" />&nbsp;条
                        </div>
                    </div>
                    <div class="row unread">
                        <div class="col-md-12 tabstyle">
                            <table class="data-table table-container tzTable" id="tzTable" name="tzTable" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th rowspan="2">选择</th>
                                        <th rowspan="2">序号</th>
                                        <th rowspan="2">状态</th>
                                        <th rowspan="2">项目名称</th>
                                        <th rowspan="2">项目规划编号</th>
                                        <th rowspan="2">操作机构</th>
                                        <th rowspan="2">操作人员</th>
                                        <th rowspan="2">时间</th>
                                        <th rowspan="2">确认</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row readed" style="display: none;">
                        <div class="col-md-12 tabstyle">
                            <table class="data-table table-container tzTable" id="tzTable1" name="tzTable" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th rowspan="2">选择</th>
                                        <th rowspan="2">序号</th>
                                        <th rowspan="2">状态</th>
                                        <th rowspan="2">项目名称</th>
                                        <th rowspan="2">项目规划编号</th>
                                        <th rowspan="2">操作机构</th>
                                        <th rowspan="2">操作人员</th>
                                        <th rowspan="2">时间</th>
                                        <th rowspan="2">确认</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            var everyNum = 20,
                nowPage = 1;
            var user_name = localStorage.getItem('user_name');
            localStorage.setItem('classActive', 'unread');
            var url = '';
            unreadList(nowPage);
            readList(nowPage);
            function getTz(url, currentPage, tableName) {
                $(tableName + '>tbody').empty();
                $.post(url, {}, function (res) {
                    var tbodyHtml = '',
                        data = res['list'];
                    for (var i = 0; i < data.length; i++) {
                        var xh = (parseInt(currentPage - 1) * everyNum) + i - 0 + 1;
                        tbodyHtml += '<tr><td><input type="checkbox"></td><td data-id="' + data[i][0] + '">' + xh + '</td><td>' + data[i][1] + '</td><td>' + data[i][3] + '</td><td>' + data[i][2] + '</td><td>' + data[i][5] + '</td><td>' + data[i][5] + '</td><td>' + data[i][6] + '</td><td><span>确认</span></td></tr>';
                    }
                    $(tableName + '>tbody').append(tbodyHtml);
                    var classActive = localStorage.getItem('classActive');
                    if (classActive == 'unread' && tableName == '#tzTable') {
                        var totalNum = res['total_num'],
                            totalPage = Math.ceil(totalNum / everyNum);
                        $('.inputsTyle').eq(4).val(totalNum);
                        $('.pageTotally').val(totalPage);
                        $('.inputsTyle').eq(2).val(data.length);
                        $('.inputsTyle').eq(0).val(currentPage);
                    }else if(classActive == 'readed' && tableName == '#tzTable1'){
                        var totalNum = res['total_num'],
                            totalPage = Math.ceil(totalNum / everyNum);
                        $('.inputsTyle').eq(4).val(totalNum);
                        $('.pageTotally').val(totalPage);
                        $('.inputsTyle').eq(2).val(data.length);
                        $('.inputsTyle').eq(0).val(currentPage);
                    }
                    tableName == '#tzTable' ? $('i.notreaded').html(totalNum) : $('i.readed').html(totalNum);
                    tzPageShow();
                });
            }
            function unreadList(currentPage) {
                url = '/api/get_notice?user_name=' + user_name + '&every_num=' + everyNum + '&now_page=' + currentPage + '&unread=0';
                getTz(url, currentPage, '#tzTable');
            }

            function readList(currentPage) {
                url = '/api/get_notice?user_name=' + user_name + '&every_num=' + everyNum + '&now_page=' + currentPage + '&unread=1';
                getTz(url, currentPage, '#tzTable1');
            }

            //删除通知
            $('.tz_delete').on('click', function () {
                var classActive = localStorage.getItem('classActive');
                var idArr = '',
                    that = [];
                $('.' + classActive + ' table tbody tr>td:first-child').find('input').each(function () {
                    if ($(this).is(':checked')) {
                        idArr += $(this).parent().next().attr('data-id') + ';'
                        that.push($(this).parent().parent());
                    }
                });
                if (idArr != '') {
                    $.post('/api/del_notice?notice_id=' + idArr.substring(0, idArr.length - 1) + '&user_name=' + localStorage.user_name, {}, function (res) {
                        classActive == 'unread' ? unreadList(1) : readList(1);
                    });
                }
            });

            //刷新
            $('.refresh').off('click').on('click', function () {
                var classActive = localStorage.getItem('classActive');
                classActive == 'unread' ? unreadList(1) : readList(1);
            });

            $('.mianbaoxie a').on('click', function () {
                localStorage.removeItem('btnId');
            });

            //已读
            $('.readed_btn').off('click').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
                localStorage.setItem('classActive', 'readed');
                $('div.readed').show();
                $('div.unread').hide();
                readList(1);
            });

            //未读
            $('.unread_btn').off('click').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
                localStorage.setItem('classActive', 'unread');
                $('div.unread').show();
                $('div.readed').hide();
                unreadList(1);
            });

            //  确认已读？
            $('#tzTable tbody ').on('click', 'tr>td:last-child', function () {
                var $this = $(this);
                var dataId = $this.parent().children().eq(1).attr('data-id');
                $.post('/api/confirm_notice?notice_id=' + dataId + '&user_name=' + localStorage.user_name, {}, function (res) {
                    unreadList(1);
                    readList(1);
                })
            });


            function tzPageShow() {
                var classActive = localStorage.getItem('classActive');
                var totalPage = $('.pageTotally').val();
                //下一页
                $('.pageDown').off('click').on('click', function () {
                    var oldPage = $('.inputsTyle').eq(0).val(),
                        currentPage = parseInt(oldPage) + 1;
                    if (currentPage <= totalPage) {
                        $('.inputsTyle').eq(0).val(currentPage);
                        classActive == 'unread' ? unreadList(currentPage) : readList(currentPage);
                    }
                });

                //上一页
                $('.pageUp').off('click').on('click', function () {
                    var oldPage = $('.inputsTyle').eq(0).val(),
                        currentPage = parseInt(oldPage) - 1;
                    if (currentPage > 0) {
                        $('.inputsTyle').eq(0).val(currentPage);
                        classActive == 'unread' ? unreadList(currentPage) : readList(currentPage);
                    }
                });

                //第一页
                $('.pageStart').off('click').on('click', function () {
                    var oldPage = $('.inputsTyle').eq(0).val();
                    if (oldPage != '1') {
                        currentPage = 1;
                        $('.inputsTyle').eq(0).val(currentPage);
                        classActive == 'unread' ? unreadList(currentPage) : readList(currentPage);
                    }
                });

                //最后一页
                $('.pageEnd').off('click').on('click', function () {
                    var oldPage = $('.inputsTyle').eq(0).val();
                    if (oldPage != totalPage) {
                        currentPage = totalPage;
                        $('.inputsTyle').eq(0).val(currentPage);
                        classActive == 'unread' ? unreadList(currentPage) : readList(currentPage);
                    }
                });

                //跳转到哪页
                $('.inputsTyle').eq(0).off('change').on('change', function () {
                    var currentPage = $(this).val();
                    if (currentPage - 0 < 1 || parseInt(currentPage) > parseInt(totalPage)) {
                        alert('请输入正确的页码');
                    } else {
                        $('.inputsTyle').eq(0).val(currentPage);
                        classActive == 'unread' ? unreadList(currentPage) : readList(currentPage);
                    }
                });
            }

        })
    </script>
</body>

</html>